<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!-- 1、头部 -->
<head th:replace="fragment/frontend_fragment::head(归档页面)"></head>

<!-- 2、中间内容body(导航nav, 底部footer) -->
<body>
<!-- 容器局部刷新 -->
<div id="pageContainer">
    <div class="bg-archives">
    <!-- 2.1：导航栏 -->
    <nav th:replace="~{fragment/frontend_fragment::nav(3)}"></nav>

    <br>
    <br>
    <br>

    <!-- 2.2：中间内容---归档内容 -->
    <div class="m-container-small m-padded-tb-big m-opacity m-phone-opacity">
        <!--归档内容-->
        <div class="ui container">  <!--拥有：响应式的效果-->
            <!--头介绍-->
            <div class="ui top attached segment border-radius m-archives-title-bar-background">
                <div class="ui middle aligned two column grid">
                    <div class="column">
                        <span class="ui header" style="color: teal">归档</span>
                    </div>

                    <div class="right aligned column">
                        <span class="ui header" style="color: teal">共</span> <span class="m-font-number"
                                                                                   th:text="${#arrays.length(blogs)}"> 142 </span>
                        <span class="ui header" style="color: teal">篇</span>
                    </div>
                </div>
            </div>

            <select class="ui center aligned fluid selection attached segment dropdown archives-font" th:onchange="look(this)"
                    th:unless="${null == blogs || blogs.size() == 0}">
                <option value="2021" th:each="year:${years}" th:text="${year}" th:value="${year}"
                        th:selected="${currentYear == year}">2021
                </option>
            </select>

            <!--归档时间（及）文章-->
            <th:block th:unless="${null == blogs || blogs.size() == 0}">
                <div class="ui fluid vertical menu" th:each="blog : ${blogs}">
                    <a href="" th:href="@{/templates/frontend/blog/{id}(id=${blog.id})}" target="_blank" class="item"
                       id="MyArchStripe">
                                <span>
                                     <i class="mini paper plane outline icon icon-color"></i>&nbsp;&nbsp;[[${blog.title}]]
                                     <div class="ui teal basic left pointing label m-padded-tiny font-spacing"
                                          th:text="${#dates.format(blog.createTime, 'MM月dd日')}"></div>
                                </span>

                        <div class="ui blue  basic label m-padded-small font-spacing" th:text="${blog.flag}">原创</div>
                    </a>
                </div>
            </th:block>
        </div>
    </div>
    </div>
</div>

<!-- 2.3：底部footer -->
<footer th:replace="fragment/frontend_fragment::footer"></footer>

<!-- 3、js引用 -->
<!--/*/<th:block th:replace="fragment/frontend_fragment :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!--/*/</th:block>/*/-->

<!-- 4、页面专用js -->
<script th:inline="javascript">

    // 移动端 导航栏点击显示
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    function look(o) {
        location.href = "/frontend/archives/" + o.value;
    }

    $('.ui.dropdown').dropdown({
        on: 'hover'
    });
</script>

</body>

</html>